<template>
	<view class="leftGroup">
		<!-- 左侧导航栏 -->
		<scroll-view class="recyclable-left" scroll-y="true" :scroll-into-view="leftScrollIntoIndex">
			<view class="clable-text" v-for="(item,index) in clableList" @tap="onunClick(index,item)"
				:id="'index'+index" :class='leftIndex===index?"csreindex":"f-color"'>
				{{item.name}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		props:{
			clableList:Array
		},
		data(){
			return{
				leftIndex: 0, //左侧导航栏选中的索引(不可回收)
				leftScrollIntoIndex: "index0", //跟随的索引id(不可回收)
				clableMainList:[],//对应商品数据
			}
		},
		methods:{
			onunClick(e, event){//点击左侧导航栏列表
				// console.log(id)
				const index = this.clableList.findIndex(item => item.id === event.id)
				console.log(this.clableList)
				if (index != -1) { //数组存在
					// console.log(this.clableList[index])
					this.clableMainList = this.clableList[index].children
					// 将数据存到vuex中
				} else {
					console.log("查找失败！！！！！")
				}
				if (this.leftIndex === e) {
					return;
				}
				this.leftIndex = e
				// console.log(e)
				this.leftScrollIntoIndex = "index" + e
				this.$emit("clableMainhandle",this.clableMainList)
				this.$emit("handleGoods",event)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.leftGroup{
		width: 100%;
		.recyclable-left {
			font-size: 27rpx;
			text-align: center;
			box-sizing: border-box;
			// padding-top: 2vh;
			width: 100%;
			height: 100%;
			// padding-top: 20rpx;
		
			// border: 1px solid #000;
			.clable-text {
				padding: 30rpx 0;
				// border: 1px solid #f00;
			}
		
			.csreindex {
				//当前选中样式
				background: #fff;
				color: #00b388;
				border-left: 8rpx solid #00b388;
				box-sizing: border-box;
			}
		}
	}
	
</style>